<template>
  <div class="common-size horizontal repair_basic">
    <page-head :pageHead="pageHeadData"></page-head>
    <div class="horizontal-page-content">
      <div class="horizontal-content half">
        <div class="half-content left">
          <content-head :contentHead="contentHeadData"></content-head>
          <div class="content-container">
            <div class="page-chart page-chart4">
              <div class="chart-box chart-box-basic">
                <div class="situation-box">
                  <p>维修情况</p>
                  <table class="repair-time">
                    <tbody>
                    <tr>
                      <td>
                        <div class="bg-column">
                          <div class="light-column" v-bind:style="'width:'+(situation.leftNum / (situation.leftNum + situation.rightNum) * 100)+'%'">
                            <div class="leftBarText">{{situation.leftBarText || situation.leftNum + '次'}}</div>
                          </div>
                          <div class="light-column right-light-column" v-bind:style="'width:'+(situation.rightNum / (situation.leftNum + situation.rightNum) * 100)+'%'">
                            <div class="leftBarText">{{situation.rightBarText || situation.rightNum + '次'}}</div>
                          </div>
                        </div>
                        <div>
                          <div class="left" v-html="situation.leftText"></div>
                          <div class="right" v-html="situation.rightText"></div>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <div class="time-box">
                  <p>平均耗时</p>
                  <table class="repair-time" ref="time">
                    <tbody>
                    <tr v-for="(item,index) in timeData">
                      <td class="time-bar-td time-height">
                        <div class="bg-column back_no">
                          <div class="bg-icon" v-for="(num, index) in item.num" v-bind:style="'background:rgba(112,191,114,'+ (1 - index / (item.maxNum +20)) +')'"></div>
                        </div>
                      </td>
                      <td class="time-bar-two time-height">
                        <div v-html="item.text"></div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="horizontal-distribute-container text-center">
              <div v-html="item" v-for="(item, index) in textData1"></div>
            </div>
          </div>
        </div>
        <div class="half-content right">
          <content-head :contentHead="contentHeadDataTwo"></content-head>
          <div class="content-container">
            <div class="page-chart page-chart4">
              <div class="y-name">单位:次</div>
              <div class="chart-box" ref="chart2"></div>
            </div>
            <div class="mark">
              <div class=""><i class="icon_mark1"></i><div>内修</div></div>
              <div class=""><i class="icon_mark2"></i><div>外修</div></div>
            </div>
            <div class="horizontal-distribute-container text-center">
              <div v-html="item" v-for="(item, index) in textData2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <page-footer :pageFooter="pageFooterData"></page-footer>
  </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import contentHead from "./contentHead.vue"
  import {nuxtMixins} from '../../assets/javascript/mixin'
  let echarts = require('echarts')
  export default{
    name: 'repair_basic',
    props:['chartData'],
    mixins: [nuxtMixins],
    data () {
      return {
        pageTitle: '<span>维修概况</span><span class="en_title"> Maintenance Overview</span>',
        contentTitle: '维修基本情况',
        titleDescribe: '',
        contentHeadDataTwo: {
          contentTitle: '时间分析',
          titleDescribe: ''
        },
        timeData: []
      }
    },
    methods: {
      timeDatas () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart1) return []
        if(!this.chartData.chartData.chart1.chart) return []
        if(!this.chartData.chartData.chart1.chart.time) return []
        const chart = this.chartData.chartData.chart1.chart.time.map(v => {
          return v.value
        })
        const max = Math.max(...chart)
        const width = this.$refs.time.offsetWidth * 0.75
        const maxNum = parseInt((width / 20))
        const newChart = this.chartData.chartData.chart1.chart.time.map(v => {
          v.num = parseInt(v.value / max * maxNum)
          v.maxNum = maxNum
          return v
        })
        this.timeData = newChart
      },
      ageLimitChart () {
        if (!this.chartData) {
          return false
        }
        if (!this.chartData.chartData) {
          return false
        }
        if (!this.chartData.chartData.chart1 && !this.chartData.chartData.chart2) {
          return false
        }
        if (!this.chartData.chartData.chart1.chart && !this.chartData.chartData.chart2.chart) {
          return false
        }
        const  chart1 = this.chartData.chartData.chart1
        const  chart2 = this.chartData.chartData.chart2
        const option = {
          backgroundColor: '#fff',
          xAxis: {
            type: 'category',
            boundaryGap : true,
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              interval: 0,
              rotate:-90,
              textStyle: {
                color:'#231815'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            },
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            top: 40,
            containLabel: true
          },
          yAxis: {
            type : 'value',
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#231815'
              }
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            }
          },
          series: [
          ]
        };
        const chart2Echart = echarts.init(this.$refs.chart2)
        const bar = {
          name: '3的指数',
          type: 'bar',
          barWidth: '15%',
          stack: '时长',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#9EC3E8' // 0% 处的颜色
                }, {
                  offset: 1, color: '#4E8AC9' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              barBorderRadius: [15,15, 0, 0],
              globalCoord: false
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color:'#231815',
                fontWeight: 'bolder',
                fontSize: 14
              }
            }
          },
          data:[]
        }
        if (chart2 && chart2.chart) {
          const option2 = JSON.parse(JSON.stringify(option))
          option2.xAxis.data = chart2.chart.x_data
          option2.yAxis.axisLabel.formatter = function(value,index){
            return Math.abs(value)
          }
          const bar2 = JSON.parse(JSON.stringify(bar))
          const bar3 = JSON.parse(JSON.stringify(bar))
          bar3.itemStyle.normal.color.colorStops[0].color = '#70bf72'
          bar3.itemStyle.normal.color.colorStops[1].color = '#a9d49e'
          bar3.label.normal.position = 'bottom'
          bar3.label.normal.formatter = function (value) {
            return Math.abs(value.value)
          }
          bar3.itemStyle.normal.barBorderRadius = [0,0, 15,15]
          bar3.data = chart2.chart.y_out.map(v => -v)
          option2.series.push(bar2)
          option2.series.push(bar3)
          option2.series[0].data = chart2.chart.y_in
          chart2Echart.setOption(option2)
        }
      }
    },
    computed:{
      situation () {
        if(!this.chartData.chartData) return {}
        if(!this.chartData.chartData.chart1) return {}
        if(!this.chartData.chartData.chart1.chart) return {}
        return this.chartData.chartData.chart1.chart.situation || {}
      },
      textData1 () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart1) return []
        if(!this.chartData.chartData.chart1.textData) return []
        return this.chartData.chartData.chart1.textData
      },
      textData2 () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart2) return []
        if(!this.chartData.chartData.chart2.textData) return []
        return this.chartData.chartData.chart2.textData
      }
    },
    mounted(){
      this.ageLimitChart()
      this.timeDatas()
    },
    components: {
      PageFooter,
      pageHead,
      contentHead
    }
  }
</script>
<style lang="scss">
  .common-size.horizontal {
    &.repair_basic {
      .content-container {
        padding: 0 10px;
        height: 452px;
        .horizontal-distribute-container {
          text-indent: 0em;
        }
        .page-chart {
          position: relative;
          .chart-box {
            width: 100%;
            height: 100%;
            &.chart-box-basic {
              padding: 0 29px;
              p {
                font-weight: bold;
                font-size: 13px;
              }
              .situation-box {
                padding-top: 80px;
              }
              .time-box {
                padding-top: 40px;
              }
              .repair-time{
                width: 100%;
                margin: 0 auto;
                border-collapse: collapse;
                >tbody>tr{
                  >td{
                    border: 1px solid #e6e6e3;
                    height: 50px;
                    .bg-column{
                      width: 100%;
                      height: 17px;
                      background: #e8e7e3;
                      border-radius: 15px;
                      overflow: hidden;
                      position: relative;
                      margin: 0 auto;
                      &.back_no {
                        background: transparent;
                      }
                      .bg-icon {
                        width: 10px;
                        height: 10px;
                        background: #000;
                        margin-right: 10px;
                        display: inline-block;
                        border-radius: 10px;
                        vertical-align: middle;
                      }
                      .light-column{
                        position: absolute;
                        top:0;
                        left:0;
                        width: 0%;
                        height: 100%;
                        background: linear-gradient(to right, #8eb5d6, #4e80b5);
                        .leftBarText {
                          color: #fff;
                          font-size: 12px;
                          text-align: center;
                          height: 100%;
                          line-height: 1.5;
                        }
                        &.right-light-column {
                          right: 0;
                          left: auto;
                          background: linear-gradient(to right, #70bf72, #a9d49e);
                        }
                      }
                    }
                    &:nth-child(1){
                      /*background: #f7f7f6;*/
                      color: #231815;
                      font-size: 12px;
                      text-align: right;
                      border: 0;
                      padding-right: 7px;
                    }
                    &:nth-child(2){
                      &.odd {
                        background: #f7f7f6;
                      }
                      width: 65%;
                      border-right: 0;

                    }
                    &:nth-child(3){
                      &.odd {
                        background: #f7f7f6;
                      }
                      border-left: 0;
                      color: #231815;
                      font-size: 12px;
                      padding-right: 15px;
                      text-align: right;
                    }
                    &.time-bar-td {
                      width: 75%;
                      text-align: left;
                    }
                    &.time-bar-two {
                      font-size: 12px;
                      border:0;
                      text-align: right;
                    }
                    &.time-height {
                      height: 20px;
                      .bg-column {
                        border-radius: 0;
                        height: auto;
                      }
                    }
                  }
                }
              }
            }
          }
          .y-name {
            position: absolute;
            top: 5px;
            right: 4%;
            font-size: 12px;
            color: #989898;
          }
        }
        .mark {
          color: #666;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          width: 160px;
          margin: 0 auto;
          >div{
            width: 80px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            > i {
              display: inline-block;
              vertical-align: middle;
              width: 10px;
              height: 10px;
              margin: 0 5px 0 0;
              border-radius: 100%;
              background: -webkit-gradient(linear,left top,left bottom,from(#4b8bc9),to(#91ecb4));
            }
            >div {
              display: inline-block;
              vertical-align: middle;
            }
            .line-mark {
              display: inline-block;
              vertical-align: top;
              width: 25px;
              height: 2px;
              margin: 10px 5px 0 0;
              background: #55b437;
              border-radius: 0;
            }
            .icon_mark1 {
              background: -webkit-gradient(linear,left top,left bottom,from(#9EC3E8),to(#4E8AC9));
            }
            .icon_mark2 {
              background: -webkit-gradient(linear,left top,left bottom,from(#a9d49e),to(#70bf72));
            }
          }
        }
      }
    }
  }
</style>
